<template>
	<view class="box">
		<view class="cnter">
			<view class="box1">
				<text>昵称</text>
				<view class="right">
					<input type="text" value="" v-model="user.userNickname" />
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="box1">
				<text>出生日期</text>
				<view class="right">
					<input type="text" value="" v-model="user.userBirthday" />
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="box1">
				<text>地址</text>
				<view class="right">
					<input type="text" value="" v-model="user.userAddress" />
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="">
				<u-button @click="put" type="success" shape="square" size="medium" :ripple="true"
					ripple-bg-color="#909399">保存</u-button>
			</view>
		</view>
		<u-toast ref="uToasts" />
		<u-toast ref="uToastss" />
		<u-top-tips ref="uTips"></u-top-tips>
		<u-top-tips ref="uTipsb"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions
	} = createNamespacedHelpers("user");
	export default {
		created() {
			this.getUserinfo()
		},
		data() {
			return {
				user: {
					userNickname: "",
					userBirthday: "",
					userAddress: ""
				},
				show: true
			}
		},
		methods: {
			...mapActions(['allUserinfo', 'changeUserinfo']),
			//获取用户信息
			async getUserinfo() {
				const data = await this.allUserinfo()
				//console.log(data)
				if (data.code == 10001) {
					this.user.userNickname = data.data.userNickname
					this.user.userBirthday = data.data.userBirthday
					this.user.userAddress = data.data.userAddress
				} else {
					console.log("获取用户失败")
				}
			},
			//修改用户
			async put() {
				const data = await this.changeUserinfo({
					userNickname: this.user.userNickname,
					userBirthday: this.user.userBirthday,
					userAddress: this.user.userAddress
				})
				if (data.code == 10001) {
					this.getUserinfo()
					this.getstatuo()
					this.$refs.uToasts.show({
										title: '修改成功',
										type: 'success',
										back:true
									})
					// this.$refs.uTips.show({
					// 	title: '修改成功',
					// 	type: 'success',
					// 	duration: '2300'
					// })
					// uni.switchTab({
					// 	url: "/pages/mycenter/mycenter"
					// })
				} else {
					// this.$refs.uTipsb.show({
					// 	title: '修改失败',
					// 	type: 'error',
					// 	duration: '2300'
					// })
					this.$refs.uToastss.show({
										title: '修改失败',
										type: 'error',
										back:true
									})
				}
			},
			// 返回之前的页面重新获取未读消息的数
			getstatuo() {
				// #ifdef MP-WEIXIN
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 3]; // 前2个页面
				beforePage.onLoad(); // 执行前一个页面的onLoad方法s
				 // #endif
			}
		},
		watch: {
			"user.userNickname"(a, b) {
				// this.show=false
				console.log(a, b)
			},
			"user.userBirthday"(a, b) {
				// this.show=false
				console.log(a, b)
			},
			"user.userAddress"(a, b) {
				// this.show=false
				console.log(a, b)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.box {
		background-color: #fafafa;
		height: 100vh;

		.cnter {
			padding: 10rpx 20rpx;
			background-color: #ffffff;
			//border: 1px solid red;
			font-size: 30rpx;
			font-weight: 500;

			.box1 {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right {
					color: #d8d8d8;
					display: flex;

					input {
						//border-bottom: 1px solid red;
						width: 400rpx;
						text-align: center;
					}

					image {
						border: 1px solid black;
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}
				}

				border-bottom: 1px solid #fafafa;
			}
		}
	}
</style>
